<template>
    <div class="mine-pagination-warp">
        <el-pagination
            :background="background"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="pageSizes"
            :page-size="pageSize1"
            :layout="layout"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    props: {
        total: {
            type: [Number, String],
            default: 0
        },
        pageSize: {
            type: [Number],
            default: 0
        },
        currentPage: {
            type: [Number],
            default: 0
        },
        pageSizes: {
            type: [Array],
            default: function() {
                return [10, 20, 30];
            }
        },
        layout: {
            type: [String],
            default: "total, prev, pager, next, sizes, jumper"
        },
        background: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        pageSize1: {
            get() {
                return this.pageSize;
            },
            set(val) {
                this.$emit("numberChange", { pageSize: val, flag: "pageSize" });
            }
        },
        currentPage1: {
            get() {
                return this.currentPage;
            },
            set(val) {
                this.$emit("numberChange", {
                    currentPage: val,
                    flag: "currentPage"
                });
            }
        }
    },
    methods: {
        // 选择每页多少条
        handleSizeChange(val) {
            this.pageSize1 = val;
        },
        // 选择第几页
        handleCurrentChange(val) {
            this.currentPage1 = val;
        }
    }
};
</script>

<style lang="less" scoped>
@import "~@/style/variables.less";
.mine-pagination-warp {
    text-align: right;
    margin-top: 10px;
    //   margin-bottom: 20px;
    .el-pagination {
        font-weight: 400;
    }

    /deep/.el-pagination.is-background .btn-next,
    /deep/.el-pagination.is-background .btn-prev,
    /deep/.el-pagination.is-background .el-pager li {
        background-color: #ffffff;
        border: 1px solid @--border-color-base;
        border-radius: 4px;
        &:hover {
            color: @--pagination-hover-color;
        }
    }
    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
        color: @--color-primary;
        border: 1px solid @--color-primary;
    }
    /deep/.el-pagination.is-background .btn-next.disabled,
    /deep/.el-pagination.is-background .btn-next:disabled,
    /deep/.el-pagination.is-background .btn-prev.disabled,
    /deep/.el-pagination.is-background .btn-prev:disabled,
    /deep/.el-pagination.is-background .el-pager li.disabled {
        background: @--button-disabled-background-color;
        color: @--color-text-placeholder;
    }
}
</style>
